<template>
	<view class="main">
		<view class="bg">
			<image src="../../../static/images/login_bg.png" mode=""></image>
		</view>
		<!-- <u-navbar :is-back="true" title="登陆普通账户" :background="background" back-icon-color="#fff" title-color="#fff"></u-navbar> -->
		<view class="form">
			<view class="title">
				注册
			</view>
			<view class="title_2">
				开启你的数字藏品之旅
			</view>
			<view class="inputs">
				<input type="text" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="inputs">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<input v-model="codes" placeholder="请输入验证码" />
						<view class="code"  @click="sendCodeBtn">
							{{send?'发送验证码':second+'s重新发送'}}
						</view>
				</view>
			</view>
			<view class="inputs">
				<input type="password" placeholder="请输入密码" v-model="pwd" />
			</view>


			<view class="btn" @click="register">
				注册
			</view>
			<view class="login" @click="login">
				登录
			</view>


		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone: '',
				pwd: '',
				yzm: '',
				background: {
					backgroundColor: '#E93133',
				},
				change: false,
				mobile: '',
					s: 60,	//默认倒计时
						second: 0,
						send: true, //按钮可以点击
				codes: '',

			};
		},
		methods: {
			// 发送验证码
			sendCodeBtn() {
				let that = this;
				// 防止多次重复点击
				if (!that.send) {
					return false;
				}
				global.$http.request({
					url: '/api/index/send_yzm',
					data: {
						scene: 'register',
						phone: this.phone,
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 0) {
						// 发送验证码
						that.send = false;
						uni.showToast({
							title: '发送成功',
							icon: 'none',
							success: () => {
								this.time(); // 倒计时
							}
						})
					}
				})

			},
			// 倒计时
			time() {

				let that = this;
				that.second = that.s;
				let interval = setInterval(function() {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval);
					} else {
						console.log(that.second)
						that.second--;
					}
				}, 1000)
			},
			changed() {
				this.change = !this.change
				console.log(this.change);
			},
			register() {
		
			
				
				console.log(this.phone);
				console.log(this.pwd);
				global.$http.request({
					url: '/api/login/register',
					data: {
						phone: this.phone,
						pwd: this.pwd,
						code: this.codes
					}
				}).then(res => {
					
					console.log(res);
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							mask: true,
							duration: 2000
						})
				      setTimeout(function(){
					uni.navigateTo({
						url:'../login/login'
						},2000)
					})
						// uni.setStorageSync('token', res.data.data.token);
						// uni.setStorageSync('user_id', res.data.data.id);
						// uni.setStorageSync('userinfo', res.data.data);

					}
				})
			},
			//验证码
			// 		// codeChange(text) {
			// 			console.log(text);
			// 			this.codeText = text;
			// 		},
			// 		getCode() {
			// global.$http.request({
			// 					url: '/api/index/send_yzm',
			// 					data: {
			// 						scene: 'register',
			// 						phone: this.phone,
			// 					}
			// 				}).then(res => {
			// 					console.log(res);
			// 					if(res.data.code==0){
			// 						if (this.$refs.uCode.canGetCode) {
			// 							// 模拟向后端请求验证码
			// 							uni.showLoading({
			// 								title: '正在获取验证码'
			// 							})
			// 							setTimeout(() => {
			// 								uni.hideLoading();
			// 								// 通知验证码组件内部开始倒计时
			// 								this.$refs.uCode.start();
			// 							}, 1000);
			// 						} else {
			// 							this.$u.toast('倒计时结束后再发送');
			// 						}
			// 					}
			// 				})

			// 		},
			login() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;

		.main {
			width: 750rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.bg {
				position: absolute;
				top: 0;
				z-index: -1;

				image {
					width: 750rpx;
					height: 1624rpx;
				}
			}

			.form {
				padding: 256rpx 0 0 72rpx;
				width: 750rpx;
				height: 750rpx;
				font-family: PingFang SC-Regular, PingFang SC;

				// margin-top: 40%;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				.title {
					font-size: 60rpx;
					font-weight: 400;
					color: #FFFFFF;

				}

				.title_2 {
					padding: 16rpx 0 120rpx 0;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;

				}

				.inputs {
					width: 606rpx;
					height: 92rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					border: 2rpx solid #F3C860;
					margin-bottom: 32rpx;

					input {
						padding: 20rpx 0 24rpx 32rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.code {
						white-space: nowrap;
						padding-right: 32rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #F3C860;

					}
				}

				// .inputs input:focus{
				// 	background-color: #fff;
				// }
				// input::focus {
				// 	width: 606rpx;
				// 	height: 92rpx;
				// 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				// 	opacity: 1;
				// 	border: 2rpx solid #F3C860;
				// }




				.nav {
					width: 400rpx;
					margin-top: 20rpx;
					display: flex;
					flex-direction: row-reverse;
					font-size: 26rpx;
					color: #808080;
				}

				.btn {
					width: 606rpx;
					height: 92rpx;
					text-align: center;
					line-height: 92rpx;
					background: #F3C860;
					border-radius: 46rpx 46rpx 46rpx 46rpx;
					opacity: 1;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;

				}

				.login {
					margin-top: 32rpx;
					width: 606rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F3C860;
				}
			}
		}

	}
</style>
